<template>
	<div>
		<jk-search-select
			:placeholder="placeholder"
			:only-key="onlyKey"
			:size="size"
			:query-name="queryName"
			class="width-100-percent"
			:params-data="ruleForm"
			:readonly="readonly"
			:disabled="disabled"
			:query-search-async="querySearchAsync"
			@on-select="handleSelect"
			@on-click-icon="onSelectIcon"
		></jk-search-select>

		<select-dialog
			:form-data="ruleForm"
			:dialog-state="selectDialogState"
			@on-confirm="onConfirmBtnOfSelectDialog"
			@on-visible-change="onVisibleChangeOfSelectDialog"
		></select-dialog>
	</div>
</template>
<script>
    import selectDialog from './radio-select-dialog';
    import { pageConfig } from '../../../../../../utils/jk/jk-tool';
    import { productionPrdNoticePage } from '../../../../../../api/production/xsNotice';

    export default {
        props: {
            formData: {
                type: Object,
                default() {
                    return {};
                }
            },
            onlyKey: { // 外部与optionKey关联绑定的字段名
                type: String,
                default: 'productId'
            },
            queryName: { // 搜索的字段
                type: String,
                default: 'productName'
            },
            placeholder: {
                type: String,
                default: '批号'
            },
            size: {
                type: String,
                default: 'medium'
            },
            disabled: {
                type: Boolean,
                default: false
            },
            readonly: {
                type: Boolean,
                default: false
            }
        },
        components: { selectDialog },
        data() {
            return {
                selectDialogState: false,
                ruleForm: {}
            };
        },
        methods: {
            querySearchAsync(queryString) {
                return productionPrdNoticePage({
                    productName: queryString,
                    pageNo: 1,
                    workshopId: this.ruleForm.workshopId,
                    pageSize: pageConfig.remotePageSize
                }).then(res => {
                    if (res.data.status === 200) {
                        return res.data.res ? res.data.res.map(x => {
                            return {
                                value: x.productName,
                                ...x
                            };
                        }) : [];
                    }
                });
            },
            handleSelect(item) {
                this.$emit('on-select', item);
            },
            onVisibleChangeOfSelectDialog(e) {
                this.selectDialogState = e;
            },
            onConfirmBtnOfSelectDialog(e) {
                if (Object.keys(e).length) {
                    this.$emit('on-select', e);
                    this.selectDialogState = false;
                }
            },
            onSelectIcon() {
                this.selectDialogState = true;
            }
        },
        watch: {
            formData: {
                handler(newVal) {
                    this.ruleForm = JSON.parse(JSON.stringify(newVal));
                },
                deep: true,
                immediate: true
            }
        }
    };
</script>
